<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>layui 调试预览</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body>
	<table class="layui-hide" id="demo" lay-filter="test"></table>
	<!-- 每列的行工具栏 -->
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-normal  layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger  layui-btn-xs" lay-event="del">删除</a>
	</script>
	<!-- 头工具栏 -->
	<script type="text/html" id="headBar">
  		<a class="layui-btn layui-btn-normal" lay-event="add">添加</a>
  		<a class="layui-btn layui-btn-danger" lay-event="deleteBatch">批量 删除</a>
	</script>
</body>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
//加载模块  
layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
  //得到各种内置组件
  var layer = layui.layer //弹层
  ,laypage = layui.laypage //分页
  ,table = layui.table //表格
  ,$ = layui.$//jquery对象使用
  
  layer.msg('欢迎进入后台管理系统');
  
  //执行一个 table 实例 
  table.render({
    elem: '#demo' //表格的id
    ,height: 600  //表格的高度
    ,url: '${pageContext.request.contextPath}/admin/AdminClazzListServlet'
    ,title: '用户表'
    ,page: true //开启分页 会默认帮我们向后端传递参数 page=1  limit=10
    ,toolbar: '#headBar' //自定义的头工具栏(将id引入)
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
        {type: 'checkbox', fixed: 'left'}
      	//filed的值必须跟实体类的属性一样
        ,{field: 'cid', title: '班级编号', width:150, sort: true, fixed: 'left', totalRowText: '合计：'}
        ,{field: 'cname', title: '班级名', width:300}
        ,{field: 'year', title: '入学年份', width: 150, sort: true}
        ,{field: 'department', title: '所属学部', width: 150}
        ,{fixed: 'right', width: 150, align:'center', toolbar: '#barDemo'}
      ]]
  });
//监听头工具栏事件
  //test是监听的对应表格的 lay-filter的取值
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    //obj.event:头工具栏对应按钮的lay-event的值
    switch(obj.event){
      case 'add':
         layer.open({
        	title:"添加班级",
        	type:2,
        	content:"${pageContext.request.contextPath}/admin/AdminAddClazzServlet1",
         	area:["90%","90%"],
         	shade:0.8,
         	shadeClose:true
       	 })
         
      break;
      case 'deleteBatch':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
          //获取选中的所有id
          var cIds = []
          //遍历所有选中的数据
          for(var i=0;i<data.length;i++){
			  cIds.push(data[i].cid)
          }
          $.ajax({
        	  url:"${pageContext.request.contextPath}/admin/deleteClazzBatch",
        	  type:"post",
        	  traditional:true,//ajax设置traditional:true可以像后端传递数组
        	  data:{
				  cIds:cIds
        	  },success:function(res){
        		  alert(res.msg)
        	  	  //窗口重新加载
        		  window.location.reload();
       	      }
          })
        }
      break;
    };
  });
  table.on('tool(test)', function(obj){
      var data = obj.data;
      switch(obj.event){
      case "edit":
      	 $.ajax({
               type: 'POST',
               url: "${pageContext.request.contextPath}/admin/AdmineditClazzServlet",//发送请求
               data:{ id:data.cid},
               dataType: "html",
               success: function (result) {
                   var htmlCont = result;
                   layer.open({
                       type: 1,//弹出框类型
                       title: "编辑阶段",
                       shadeClose: true,
                       maxmin: true,
                       area:["90%","90%"],
                    	 shade:0.8,
                       content: htmlCont,
                       btn: ['确定','关闭'],
                       yes: function(index,layero){
                           var res = window["layui-layer-iframe" + index].callbackdata();
                         //  console.log(res);
			        		window.location.reload();
                               layer.close(index);
                         },
                         cancel: function(index, layero){ 
                      	   window.location.reload();
          
                      	     layer.close(index)
                      	   return false; 
                      	 }  
                   });
               }
           });
      break;
		case 'del':
			layer.confirm('真的要删除该班级吗？',function(index){
				layer.closeAll('dialog');
					$.ajax({
						url:'${pageContext.request.contextPath}/admin/delClazzById',
						type:'post',
						data:{'id':data.cid},
						success:function(res){
							 alert(res.msg)
			        		  window.location.reload();
						}
					});
			});
		break;
      }
  });
})
</script>
</html>